<template>
    <view class="my-collapse" :class="{showCheckBox: selectType}">
        <template v-for="(item, index) in list">
            <view :key="index" v-show="!doFilter || item.show" v-if="item.children">
                <my-u-collapse-item :title="getTitle(item)" :key="index" :duration="10" ref="mycolsitem"
                    :select-type="selectType"
                    :item="item"
                     :show-lwicon="showLwicon"
                    :default-expand="item.defaultExpand" :name="item.id">
                      <tree-item :list="item.children" ref="mySelectTree" :show-count="showCount" :do-filter="doFilter" :selectType="selectType"
                        @onItemClick="handlerItemClick"></tree-item>
                </my-u-collapse-item>
            </view>
            <view :key="'a' + index" v-else class="item" v-show="!doFilter || item.show"
                :class="{noIcon: !showLwicon}"
                @click="handlerItemClick(item)">
                <view class="selectType" v-if="selectType">
                    <view :class="['my-checkbox', item._checked? 'checked' : '']" @click.stop.prevent="handlerCheckItemClick(item)">
						<u-icon name="checkbox-mark" color="#fff" size="15" v-if="item._checked"></u-icon>
					</view>
                </view>
                <view class="icon" v-if="showLwicon">
                    <textIcon :lwicon="item.icon" :lwtext="item.label"></textIcon>
                </view>
                <view class="name">{{item.label}}</view>
            </view>
        </template>
    </view>
</template>

<script>
    import treeItem from '@/components/treeItem/index.vue';
    import textIcon from '@/components/textIcon/index.vue';
    export default {
        mixins: [uni.$u.mpMixin],
        name: 'tree-item',
        components: {
            treeItem, textIcon
        },
        options: {
            styleIsolation: 'shared',
            addGlobalClass: true,
        },
        props: {
            list: Array,
            showCount: Boolean,
            doFilter: Boolean,
            selectType: Boolean,
            showLwicon: Boolean,
        },
        data() {
            return {
                expandValue: ['*']
            }
        },
        methods: {
            countChildrens: function(array) {
                var count = 0;
                array.forEach(n => {
                    if (n.children) {
                        count += this.countChildrens(n.children);
                    } else {
                        count++;
                    }
                });
                return count;
            },
            getTitle: function(item) {
                if (this.showCount) {
                    return item.label + `  (${this.countChildrens(item.children)})`;
                } else {
                    return item.label;
                }
      
            },
            handlerItemClick: function(item) {
                if (this.selectType) {
                    this.handlerCheckItemClick(item);
                    return;
                }
                this.$emit('onItemClick', item);
            },

			findCheckedItemIndex: function (item) {
				return this.parent.parentData.checkedList.findIndex(n => n.id == item.id);
			},
            handlerCheckItemClick: function (item) {
				// 是否已选
				var itemIndex = this.findCheckedItemIndex(item);
				// debugger
                if (itemIndex == -1) {
					item._checked = true;
                    this.parent.parentData.checkedList.push(item);
                } else {
					item._checked = false;
                    this.parent.parentData.checkedList.splice(itemIndex, 1);
                }
                this.$forceUpdate();
			},
            updateChecker: function () {
                var vm = this;
                // debugger
                vm.$refs.mySelectTree && vm.$refs.mySelectTree.forEach(cmp => {
                    cmp.updateChecker();
                });
                vm.$refs.mycolsitem && vm.$refs.mycolsitem.forEach(cmp => {
                    cmp.updateChecker();
                });
                // debugger
                vm.list.forEach(n => {
                    if (n.children) {
                       //
                    } else {
                        n._checked = vm.parent.parentData.checkedList.findIndex(m => m.id == n.id) != -1;
                    }
                });
                this.$forceUpdate();
            }
        },
        mounted: function() {
            this.getParentData('tree-select-page');
        }
    }
</script>

<style lang="scss" scoped>
    .my-collapse {
        /deep/ {
           .u-collapse-item__content__text {
               padding: 0 0 0 20rpx;
           } 
           .u-collapse-item__content.expanded {
               height: 100% !important;
           }
           .u-cell {
               padding: 5rpx;
               // border-bottom: 2rpx solid #eaebec;
           }
        } 
        
        .item {
            height: 110rpx;
            display: flex;
            align-items: center;
            padding: 10rpx 0;
            
            &.noIcon {
                height: 45rpx;
                padding: 5rpx 0;
                .name {
                    font-size: 28rpx;
                    margin-left: 0rpx;
                }
            }

            // &:not(:last-child) {
                border-bottom: 2rpx solid #eaebec;
                margin-bottom: 10rpx;
      
            // }

            /deep/ {
                .icon {
                    image {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 10rpx;
                    }
                }
            }

            .name {
                font-size: 30rpx;
                margin-left: 15rpx;
            }
        }
    }
    /deep/ .u-collapse-item {
        position: relative;
        .selectType {
            position: absolute;
            height: 88rpx;
            left: 18rpx;
            top: 0;
            .u-checkbox  {
                height: 100%;
                .u-checkbox__icon-wrap {
                    position: relative;
                }
            }
            .my-checkbox {
                width: 34rpx;
                height: 34rpx;
                border: 1px solid #999999;
                border-radius: 50%;
                position: absolute;
                top: calc(50% - 17rpx);
				display: flex;
				align-items: center;
				justify-content: center;
                &.checked, &.some {
                    background: $lw_brand_cyan;
					border: 1px solid $lw_brand_cyan;
                }
            }
        }
    }
    .my-collapse.showCheckBox {
        /deep/ {
            .u-cell {
                padding-left: 40rpx;
            }
        }
        >.item {
            .selectType {
                position: relative;
                margin-right: 40rpx;
                .my-checkbox {
                    position: relative;
                }
            }
        }
    }
    .hide {
        display: none !important;
    }
</style>
